<!-- Combo-handled YUI CSS files: --> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/assets/skins/sam/skin.css" /> 
<!-- Combo-handled YUI JS files: --> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/connection/connection-min.js&2.7.0/build/container/container_core-min.js&2.7.0/build/menu/menu-min.js&2.7.0/build/element/element-min.js&2.7.0/build/button/button-min.js&2.7.0/build/editor/editor-min.js"></script> 

<script src="{{ MEDIA_URL }}/js/yui-image-uploader.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}/css/editor.css" />

<script type="text/javascript">
function rich_editor(editor_id, width, height) {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event;
    
    var myConfig = {
        height: height+'px',
        width: width+'px',
        animate: true,
        dompath: true,
        focusAtStart: true,
        markup: 'xhtml',
        html: '<html xmlns="http://www.w3.org/1999/xhtml">\
<head>\
<title>{TITLE}</title>\
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />\
<style type="text/css">\
pre,code{display:block;overflow:auto;border:1px solid #525252;padding:3px 7px;width:auto;color:#9c0;-moz-border-radius:3px;-webkit-border-radius:3px;}\
blockquote{display:block;overflow:auto;border:1px solid #525252;padding:3px 7px;width:auto;color:#9db5c4;margin:0}\
</style>\
<style>\
{CSS}\
</style>\
<style>\
{HIDDEN_CSS}\
</style>\
<style>\
{EXTRA_CSS}\
</style>\
</head>\
<body onload="document.body._rteLoaded = true;">\
{CONTENT}\
</body>\
</html>'

    };

    var state = 'off';
    YAHOO.log('Set state to off..', 'info', editor_id);

    YAHOO.log('Create the Editor..', 'info', editor_id);
    var myEditor = new YAHOO.widget.Editor(editor_id, myConfig);
    myEditor.on('toolbarLoaded', function() {
        var insertcode_config = { group: 'insertcode', label: 'Insert Code',
            buttons: [
                { type: 'separator' },
                { type: 'push', label: 'Python', value: 'pythonbtn', disabled: false },
                { type: 'push', label: 'Javascript', value: 'jsbtn', disabled: false },
                { type: 'push', label: 'Ruby', value: 'rubybtn', disabled: false },
                { type: 'push', label: 'PHP', value: 'phpbtn', disabled: false },
                { type: 'push', label: 'XML/HTML', value: 'htmlbtn', disabled: false },
                { type: 'push', label: 'CSS', value: 'cssbtn', disabled: false },
                { type: 'push', label: 'X', value: 'xbtn', disabled: false }
            ]
        };
        
        var summary_config = { group: 'summary_part', label: 'Pagination',
            buttons: [
                { type: 'separator' },
                { type: 'push', label: 'Pagination', value: 'morebtn', disabled: false }
            ]
        }

        var b_config = { group: 'blockquote', label: 'Blockquote',
            buttons: [
                { type: 'separator' },
                { type: 'push', label: 'Blockquote', value: 'blockquotebtn', disabled: false }
            ]
        }

        var source_config = { group: 'html source', label: 'Html source',
            buttons: [
                { type: 'separator' },
                {type: 'push', label: 'Edit HTML Code', value: 'editcode'}
            ]
        }

        YAHOO.log('Create the (editcode) Button', 'info', 'example');

        this.toolbar.addButtonGroup(insertcode_config);
        this.toolbar.addButtonGroup(summary_config);
        this.toolbar.addButtonGroup(b_config);
        this.toolbar.addButtonGroup(source_config);
           
        this.toolbar.on('editcodeClick', function() {
            var ta = this.get('element'),
                iframe = this.get('iframe').get('element');

            if (state == 'on') {
                state = 'off';
                this.toolbar.set('disabled', false);
                YAHOO.log('Show the Editor', 'info', 'example');
                YAHOO.log('Inject the HTML from the textarea into the editor', 'info', 'example');
                this.setEditorHTML(ta.value);
                if (!this.browser.ie) {
                    this._setDesignMode('on');
                }

                Dom.removeClass(iframe, 'editor-hidden');
                Dom.addClass(ta, 'editor-hidden');
                this.show();
                this._focusWindow();
            } else {
                state = 'on';
                YAHOO.log('Show the Code Editor', 'info', 'example');
                this.cleanHTML();
                YAHOO.log('Save the Editors HTML', 'info', 'example');
                Dom.addClass(iframe, 'editor-hidden');
                Dom.removeClass(ta, 'editor-hidden');
                this.toolbar.set('disabled', true);
                this.toolbar.getButtonByValue('editcode').set('disabled', false);
                this.toolbar.selectButton('editcode');
                this.dompath.innerHTML = 'Editing HTML Code';
                this.hide();
            }
            return false;
        }, this, true);

        this.toolbar.on('pythonbtnClick', function(o) {
            this.execCommand('inserthtml', '<p></p><pre name="code" class="python"># Python code here</pre><p></p>');
        }, this, true);
        this.toolbar.on('jsbtnClick', function(o) {
            this.execCommand('inserthtml', '<p></p><pre name="code" class="js">// Javascript code here</pre><p></p>');
        }, this, true);
        this.toolbar.on('rubybtnClick', function(o) {
            this.execCommand('inserthtml', '<p></p><pre name="code" class="ruby"># Ruby code here</pre><p></p>');
        }, this, true);
        this.toolbar.on('phpbtnClick', function(o) {
            this.execCommand('inserthtml', '<p></p><pre name="code" class="php">// PHP code here</pre><p></p>');
        }, this, true);
        this.toolbar.on('cssbtnClick', function(o) {
            this.execCommand('inserthtml', '<p></p><pre name="code" class="css">/* CSS code here */</pre><p></p>');
        }, this, true);
        this.toolbar.on('htmlbtnClick', function(o) {
            this.execCommand('inserthtml', '<p></p><pre name="code" class="html">&lt;!-- XML/HTML code here --></pre><p></p>');
        }, this, true);
        this.toolbar.on('xbtnClick', function(o) {
            this.execCommand('inserthtml', '<p></p><pre name="code" class="x">//code here</pre><p></p>');
        }, this, true);
        
        this.toolbar.on('morebtnClick', function(o) {
            this.execCommand('inserthtml', '<hr class="more"><p></p>');
        }, this, true);
        
        this.toolbar.on('blockquotebtnClick', function(o) {
            this.execCommand('inserthtml', '<blockquote>blockquote</blockquote><p></p>');
        }, this, true);

        this.on('cleanHTML', function(ev) {
            YAHOO.log('cleanHTML callback fired..', 'info', 'example');
            this.get('element').value = ev.html;
        }, this, true);
        
        this.on('afterRender', function() {
            var wrapper = this.get('editor_wrapper');
            wrapper.appendChild(this.get('element'));
            this.setStyle('width', '100%');
            this.setStyle('height', '100%');
            this.setStyle('visibility', '');
            this.setStyle('top', '');
            this.setStyle('left', '');
            this.setStyle('position', '');

            this.addClass('editor-hidden');
        }, this, true);
    }, myEditor, true);

    yuiImgUploader(myEditor, editor_id, '/rpc/upload_image/','img');

    myEditor.render();

    return myEditor

}

</script>